<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <a-tabs v-model:activeKey="activeKey" @change="tabChange">
            <a-tab-pane v-for="item in tabsList" :key="item.key" :tab="item.tab">
              <component
                v-if="item.tab == '柱状图'"
                :is="item.editor"
                :chartData="barDataSource"
                height="50vh"
                :option="{ title: { text: '销售额排行', left: 'center' } }"
              ></component>
              <component
                v-if="item.tab == '多列柱状图'"
                :is="item.editor"
                :chartData="barMultiData"
                :option="multiBarOption"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '迷你柱状图'"
                :is="item.editor"
                :chartData="barDataSource"
                width="30%"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '面积图'"
                :is="item.editor"
                :chartData="barDataSource"
                height="50vh"
                :option="{ title: { text: '销售额排行', left: 'center' } }"
              ></component>
              <component
                v-if="item.tab == '迷你面积图'"
                :is="item.editor"
                :chartData="barDataSource"
                width="30%"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '多行折线图'"
                :is="item.editor"
                :chartData="barMultiData"
                height="50vh"
                :option="multiBarOption"
                type="line"
              ></component>
              <component
                v-if="item.tab == '饼图'"
                :is="item.editor"
                :chartData="pieData"
                height="40vh"
                :option="{ title: { text: '基础饼状图', left: 'center' } }"
              ></component>
              <component
                v-if="item.tab == '雷达图'"
                :is="item.editor"
                :chartData="radarData"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '仪表盘'"
                :is="item.editor"
                :chartData="{ name: '出勤率', value: 70 }"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '折柱图'"
                :is="item.editor"
                :chartData="barLineData"
                height="50vh"
              ></component>
              <component
                v-if="item.tab == '排名列表'"
                :is="item.editor"
                title="门店销售排行榜"
                :list="rankList"
                style="width: 600px; margin: 0 auto"
              ></component>
              <component
                v-if="item.tab == '趋势'"
                :is="item.editor"
                title="Trend"
                term="Trend："
                :percentage="30"
              ></component>
            </a-tab-pane>
          </a-tabs>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    mixins: [IndexMixin],
  });
</script>

<style lang="less">
  .content-container {
    padding: 16px;
  }
</style>
